import React from 'react'
import { StatusBar, StyleSheet, Text, View } from 'react-native'
import { TabBar } from 'antd-mobile'

export class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false,
    }
  }

  renderContent (pageText) {
    return (
      <View style={{
        padding: 20,
      }}>
        <StatusBar
          backgroundColor="blue"
          barStyle="light-content"
        />
        <Text>主页</Text>
        <Text>{pageText}</Text>
      </View>
    )
  }

  render () {
    return (
      <TabBar>
        <TabBar.Item
          title="Life"
          key="Life"
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'blueTab',
            })
          }}
          badge={1}
        >
          {this.renderContent('蓝色3')}
        </TabBar.Item>
        <TabBar.Item
          title="我的"
          key="my"
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'redTab',
            })
          }}
          badge={2}
        >
          {this.renderContent('红色3')}
        </TabBar.Item>
      </TabBar>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

})